<template>
	<view class="order xp24-32 xbs">
		<view class="top xflex-x-between ">
			<view class="xflex-x">
				<image class="xz" @click="onshow(true)" v-if="!info.show" src="/static/image/mine/wxz.png" mode=""></image>
				<image class="xz" @click="onshow(false)" v-if="info.show" src="/static/image/mine/xz.png" mode=""></image>
				<view class="sn">
					订单{{info.sn}}
				</view>
			</view>
			<view class="state">
				待发布
			</view>
		</view>
		
		<view class="">
			<view class="xflex-x-between xmt32">
				<view class="xflex-x">
					<image class="addicon" src="/static/image/mine/address.png" mode=""></image>
					<view class="addname">
					{{info.keyword}}
					</view>
					
				</view>
				<view class="xflex-x-center" @click="edit()">
					<view class="addxg">
						修改订单
					</view>
					<image class="jt" src="/static/image/mine/jt.png" mode=""></image>
				</view>
			</view>
			
			
			<view class="xmt20">
				<view class="time">
					{{info.order_info.time}}<span class="xml32">{{info.order_info.night}}晚</span>
				</view>
				<view class="info ">
					{{info.order_info.house}}间 · {{info.order_info.adult}}成人 · {{info.order_info.children}}儿童
				</view>
			</view>
			
			<view class="star xmt20 xai">
				<view class="" v-for="(item,index) in info.order_info.attach">
					<view class="xmb20">
						{{item.name}}：{{item.value}}
					</view>
					
					
					
				</view>
				<view class="">
					<view class="xmb20">
						价格：<text style="color: #198EFF;">{{info.price}}</text>
					</view>
				</view>
				
				<view class="">
					<view class="xmb20" >
						总价格：<text style="color: #198EFF;">{{info.expect}}</text>
					</view>
				</view>
			
				
			</view>
			
			
			<view class="xflex-x-between xmt32">
				<view class="cancel" @click="cancel()">
					取消订单
				</view>
				 <view class="publish" @click="publish()">
				 	去发布
				 </view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {hotelcancel,hotelpublish} from "/network/home.js"
	import {defineProps,defineEmits} from 'vue'
	let props = defineProps(['info'])
	
	let emit = defineEmits(['updata','onshow','edit','gx'])
	
	const cancel = () =>{
		console.log(props.info.id);
		hotelcancel({
			id:props.info.id
		}).then(res=>{
			uni.showToast({
				icon:"none",
				title:'取消成功'
			})
			// uni.navigateBack()
			emit('updata')
		})
	}
	
	const publish = () =>{
		let arr = []
		arr.push(props.info.id)
		hotelpublish({
			ids:arr
		}).then(res=>{
			uni.showToast({
				icon:"none",
				title:'发布成功'
			})
			emit('gx')
		})
	}
	
	const edit = () =>{
		console.log("====");
		emit('edit',props.info)
	}
	
	const onshow = (e) =>{
		emit('onshow',e)
	}
	
	
</script>

<style lang="scss" scoped>
	
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.top{
		padding-bottom: 27rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
	}
	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #198FFF;
	}
	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}
	
	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}
	
	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}
	
	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;
		
	}
	
	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}
	
	.star {

		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}
	
	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

</style>
